import { InputNumber, Input, Image, Select, Button, Modal } from '@arco-design/web-react';
import { useState, useEffect, useCallback, useRef } from 'react';
import { ICON_PATHS } from '@/assets/images/constants';
import styles from './index.module.scss';
import VoiceUploadMake from './voiceUplaodMake';
import VoiceCombine from './voiceCombine';
import VoicePeakAlign from './voicePeakAlign';

export default function DubbingMake() {
  const [currentStep, setCurrentStep] = useState(1);
  const [mergedAudioList, setMergedAudioList] = useState([]);
  const [alignPeakList, setAlignList] = useState([]);

  const handleNextStep = useCallback(data => {
    console.log(data);
    if (currentStep === 1) {
      setMergedAudioList(data);  
    }
    if(currentStep === 2) {
      setAlignList(data)
    }
    setCurrentStep(prevStep => prevStep + 1);
  }, [currentStep]);

  return (
    <div className={styles.voiceUploadMake}>
      {currentStep === 1 && <VoiceUploadMake onNextStep={handleNextStep} />}
      {currentStep === 2 && <VoiceCombine onNextStep={handleNextStep} audioList={mergedAudioList} setMergedAudioList={setMergedAudioList} />}
      {currentStep === 3 && <VoicePeakAlign alignPeakList={alignPeakList} />}
    </div>
  );
}